<template>
  <div class="app-container">
    <!-- 班级信息展示 -->
    <div class="header" v-if="studentList.length > 0">
      <h3>学生列表</h3>
      <span>共 {{ studentList.length }} 人</span>
    </div>
    
    <!-- 铺满屏幕的表格 -->
    <el-table 
      :data="studentList" 
      v-loading="loading"
      stripe
      border
      style="width: 100%; height: calc(100vh - 180px)"
      empty-text="暂无学生数据"
    >
      <el-table-column 
        prop="studentNo" 
        label="学号" 
        align="center"
        min-width="180"
        sortable
      ></el-table-column>
      
      <el-table-column 
        prop="realName" 
        label="姓名" 
        align="center"
        min-width="120"
      ></el-table-column>
      
      <el-table-column 
        label="年级" 
        align="center"
        min-width="120"
      >
        <template #default="{row}">
          {{ row.grade }}级
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listStudentByClass } from "@/api/score/metaclass";

export default {
  data() {
    return {
      studentList: [],
      loading: false,
      metaclassId: null
    }
  },
  created() {
    this.metaclassId = this.$route.query.metaclassId;
    this.getStudentList();
  },
  methods: {
    async getStudentList() {
      this.loading = true;
      try {
        const response = await listStudentByClass(this.metaclassId);
        if (response.code === 200) {
          this.studentList = response.data || [];
        } else {
          this.$message.error(response.msg || '获取数据失败');
        }
      } catch (error) {
        console.error('请求异常:', error);
        this.$message.error('网络请求异常');
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: #fff;
  height: calc(100vh - 84px); /* 减去顶部导航栏高度 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

/* 使表格容器自适应剩余空间 */
.el-table {
  flex: 1;
  overflow: auto;
}
</style>